<template>
  <div>
    <!-- 顶部组件 -->
    <header-nav></header-nav>

    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
    </van-dropdown-menu>
    
    <div class="bottomList">
      <div class="listSinger">
        <div class="listTitle" v-for="(item,index) in listBottom" :key="item.id" >

        <router-link tag="div" :to="'/singer/singerlist?id='+ item.id " >
          <img width="45" height="45" v-lazy="item.img1v1Url" />
          <h4 class="custom-title">{{ item.name }}</h4>
          </router-link>

          <span :class="['iconfont', item.followed?'icon-yiguanzhu1':'icon-guanzhu']" @click="follow(index)"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getArtistlist } from "../api/singer";
import headerNav from "../components/base/headerNav.vue";
// import Singerlist from '../components/singer/singerlist.vue';
export default {
  data() {
    return {
      arr:[],//已关注
      listBottom: [],
      typeS: ["-1", "1", "2", "3"],
      areaS: ["-1", "7", "96", "8", "16", "0"],
      value1: 0,
      value2: 0,
      value3: 0,
      option1: [
        { text: "全部", value: 0 },
        { text: "男歌手", value: 1 },
        { text: "女歌手", value: 2 },
        { text: "乐队", value: 3 },
      ],
      option2: [
        { text: "全部", value: 0 },
        { text: "华语", value: 1 },
        { text: "欧美", value: 2 },
        { text: "韩国", value: 3 },
        { text: "日本", value: 4 },
        { text: "其他", value: 5 },
      ],
      option3: [
        { text: "热门歌手", value: 0 },
        { text: "A", value: 1 },
        { text: "B", value: 2 },
        { text: "C", value: 3 },
        { text: "D", value: 4 },
        { text: "E", value: 5 },
        { text: "F", value: 6 },
        { text: "G", value: 7 },
        { text: "H", value: 8 },
        { text: "I", value: 9 },
        { text: "J", value: 10 },
        { text: "K", value: 11 },
        { text: "L", value: 12 },
        { text: "M", value: 13 },
        { text: "N", value: 14 },
        { text: "O", value: 15 },
        { text: "P", value: 16 },
        { text: "Q", value: 17 },
        { text: "R", value: 18 },
        { text: "S", value: 19 },
        { text: "T", value: 20 },
        { text: "U", value: 21 },
        { text: "V", value: 22 },
        { text: "W", value: 23 },
        { text: "X", value: 24 },
        { text: "Y", value: 25 },
        { text: "Z", value: 26 },
      ],
    };
  },
  
  components: {
    headerNav,
    // Singerlist,
  },
  methods: {

    //关注与已关注切换
    follow(id){
      if(!this.listBottom[id].followed){
        // this.$emit("information-id",this.listBottom[id])
        this.listBottom[id].followed = true;
        // console.log(this.listBottom[id].followed);
      }else{
        this.listBottom[id].followed = false;
      }
      
    },
    getsinger(types, ares, initials) {
      getArtistlist({
        type: types,
        area: ares,
        initial: initials,
      }).then((data) => {
        this.listBottom = data.artists;
        // console.log(this.listBottom);
      });
    },
  },
  watch: {
    value1(newval) {
      this.getsinger(
        this.typeS[newval],
        this.areaS[this.value2],
        this.value3 == 0 ? -1 : this.option3[this.value3].text
      );
    },
    value2(newvals) {
      this.getsinger(
        this.typeS[this.value2],
        this.areaS[newvals],
        this.value3 == 0 ? -1 : this.option3[this.value3].text
      );
    },
    value3(newvalss) {
      this.getsinger(
        this.typeS[this.value2],
        this.areaS[this.value2],
        newvalss == 0 ? -1 : this.option3[newvalss].text
      );
    },
    // arr(){
    //     console.log(this.arr);
    // }
  },
  mounted() {
    this.getsinger(
      this.typeS[this.value1],
      this.areaS[this.value2],
      this.value3 == 0 ? -1 : this.option3[this.value3].text
    );
  },
  updated(){
     this.arr = [];
    for(let i = 0; i < this.listBottom.length; i++){
     
      if(this.listBottom[i].followed){
          this.arr.push(this.listBottom[i]);
         
      }
    }
    this.$emit("information-id",this.arr);
  }
};
</script>




<style lang="less">
//歌手排列
.bottomList {
  p {
    padding-left: 5px;
    // width: 100%;
    height: 20px;
    // background-color: #dadbdc;
    // font-weight: bold;
    color: #fff;
    // font-size: 14px;
    line-height: 20px;
    text-align: left;
    margin: 10px 0;
  }
  .listSinger {
    .listTitle {
      height: 55px;
      border-bottom: 2px solid #dadbdc;
      display: flex;
      position: relative;
      img {
        display: inline-block;
        margin: 5px 7px;
        border-radius: 4px;
      }
      h4 {
        position: absolute;
        top: 50%;
        left: 65px;
        transform: translateY(-50%);
        display: inline-block;
        font-size: 16px;
        font-weight: 500;

      }
      .iconfont{
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
      }
      .icon-yiguanzhu1{
        font-size: 19px;
      }
    }
  }
}
</style>